<template>
  <div class="person-panel-wrapper">
    <div class="title">
      <div class="avatat">
        <avaratImg :age="personData.age" :customerSex="personData.gender"></avaratImg>
      </div>
      <div class="avarat-info">
        <div class="name">
          <div class="person-name">{{personData.name}}</div>
          <div class="icons">
            <div class="tag blue" v-if="personData.gender === '男'">
              <el-icon ><male /></el-icon>
            </div>
            <div class="tag red" v-if="personData.gender === '女'">
              <el-icon ><female /></el-icon>
            </div>
          
          </div>
        </div>
        <div class="avarat-item">
          <div>
            <el-icon><add-location /></el-icon>
            <span>{{personData.historySickNum}}</span> 
          </div>
          <div>
            <el-icon><postcard /></el-icon>
            <span>
              <span class="green">{{personData.age}}岁</span>
            {{getBirthDay(personData.birthDate) || '(2021-12-08)'}}</span> 
          </div>
        </div>
        <div class="avarat-item">
          <div>
            <el-icon><phone /></el-icon>
            <span>{{personData.mobileFirstNumStr}}</span> 
          </div>
        </div>
      </div>
    </div>
    <div class="middle-info">
      <div class="avarat-item">
          <div class="text-wrap">
            <span>患者备注:</span>
            <span>{{personData.remark || '无'}}</span> 
          </div>
      </div>
      <div class="avarat-item">
          <div>
            <span>患者来源:</span>
            <span>{{personData.scoreShow}}</span> 
          </div>
      </div>
      
    </div>

    <div class="panel-tabs">
      <div class="tabs-title">
        <span @click="handleClick('details')" :class="{'tabs-title-active': isActive === 'details'}">预约详情</span>
        <span @click="handleClick('logs')" :class="{'tabs-title-active': isActive === 'logs'}">预约记录</span>
      </div>
      <div class="tabs-content">
        <template v-if="isActive === 'details'">
          <div class="layout-text">
            <span>预约时间:</span>
            <span>{{personData.subscribeTime}}~{{personData.endTime}}</span>
            <span @click="hanledLog(personData.id)">日志</span>
          </div>
          <div class="layout-text">
            <span>医生:</span>
            <span>{{personData.doctorName || '未指定医生'}}</span>
          </div>
          <div class="layout-text">
            <span>科室:</span>
            <span>{{personData.departmentName || '未指定科室'}}</span>
          </div>
          <!-- <div class="layout-text">
            <span>诊室:</span>
            <span>{{'未指定诊室'}}</span>
          </div>
          <div class="layout-text">
            <span>助理:</span>
            <span>{{'未指定助理'}}</span>
          </div> -->
          <div class="layout-text">
            <span>咨询师:</span>
            <span>{{personData.consultantName || '位置的咨询师'}}</span>
          </div>
          <div class="layout-text">
            <span>预约项目:</span>
            <span>{{personData.itemNames}}</span>
          </div>
          <div class="layout-text">
            <span>预约备注:</span>
            <span>{{personData.remark}}</span>
          </div>
          <div class="layout-text">
            <span>创建人:</span>
            <span>{{personData.createUserName}}</span>
          </div>
          <div class="layout-text">
            <span>创建时间:</span>
            <span>{{personData.createTime}}</span>
          </div>
          <div class="btns">
            <div class="layout-btn" @click="handleOpenDrawp">
              <span>修改预约</span>
            </div>
            <div class="btn-right" @click="handleOpenMedical">
              <span>电子病历</span>
            </div>
            <div class="btn-right" v-if="personData.status == '新建'" @click="handleOpenOver">
              <span>确定预约</span>
            </div>
          </div>
          
        </template>
        <template v-if="isActive === 'logs'">
          <div class="logs-wrapper">
            <div class="layout-log" v-for="item in logList">
              <div class="time-info">
                <span>{{item.subscribeTime}}~{{item.endTime}}</span>
                <span>{{item.doctorName}}</span>
                <span v-if="item.subscribeTime === personData.subscribeTime">本次</span>
              </div>
              <div>
                <span>预约项目:</span>
                <span>{{item.itemNames || '无'}}</span>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>


  </div>

  <!-- 传送 -->
  <teleport to=".appointment-main">
    <!-- 操作日志 -->
    <zdialog title="操作日志" :width="'45%'" @handleClose="closeOperation" v-model="openOperation">
      <template #body>
        <div class="operaation-log">
          <el-table
            :data="operationData"
            style="width: 100%">
            <el-table-column prop="createTime" label="操作时间" width="180" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="userName" label="操作人" >
            </el-table-column>
            <el-table-column prop="updateType" label="操作类型" >
            </el-table-column>
            <el-table-column prop="details" label="变更记录" width="240">
              <template #default="scope">
              <div v-for="i in scope.row.details">
                <span style="background: orange; color: white;">{{i.columnShowName}}</span> 
                <span >{{i.beforeValue || '无'}}</span> ->
                <span >{{i.afterValue}}</span>
              </div>
                
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </zdialog>
  </teleport>

  <!-- / 预约/  -->
  <!-- <teleport to=".appointment-main">
    <el-drawer
      size="45%"
      :title="title"
      v-model="showDrawer"
      :before-close="drawerClose" destroy-on-close>
      
      <zmakeanapp v-if="isADD === 'makeanapp'"
        @cancel="cancel"
        @reloadList="reloadList"
        :makeanappInfo="makeanappInfo"

        ></zmakeanapp>
    </el-drawer>
  </teleport> -->
</template>

<script lang="ts">
import { AddLocation,Phone, Postcard, Male, Female} from '@element-plus/icons-vue'
import { defineComponent, PropType, ref } from '@vue/runtime-core'
import avaratImg from "../avatarImg/avatarImg.vue"
import { PersonPanelType } from "../../types/index"
import { getBirthDay } from "../../usefn/getBirthday"
import zdialog from '@components/dialog/dialog.vue'
import zmakeanapp from "../../components/patient/makeAnAppointment.vue"
import useRequest from "../../hook/request"
import { userCanComingApi } from "../../api/reservation"
import { ElMessage, ElMessageBox} from 'element-plus'
import { useRouter } from "vue-router"

type LogListType = {
  subscribeTime: string,
  endTime: string,
  itemNames: string,
  doctorName: string,
}
  export default defineComponent({
    name:'PersonPanel',
    props: {
      personObj: {
        type: Object as PropType<PersonPanelType>,
        default: {}
      }
    },
    components: {
      avaratImg,
      zdialog,
      zmakeanapp,

      Phone, Postcard, Male, Female, AddLocation
    },
    emits: ['reloadList', 'handleOpenEditAnApp'],
    setup(props, ctx) {
      let data = props.personObj;
      let personData = {
        id: data.id,
        customerId: data.customerId,
        name: data.customerInfo && data.customerInfo.name,
        age: data.age,
        createTime: data.createTime,
        remark: data.remark,
        status: data.status,
        subscribeTime: data.subscribeTime,
        endTime: data.endTime,
        doctorName: data.doctorName,
        itemNames: data.itemNames,
        gender: data.customerInfo && data.customerInfo.gender,
        historySickNum: data.customerInfo && data.customerInfo.historySickNum,
        birthDate: data.customerInfo && data.customerInfo.birthDate,
        mobileFirstNumStr: data.customerInfo && data.customerInfo.mobileFirstNumStr,
        createUserName: data.customerInfo && data.customerInfo.createUserName,
        scoreShow: data.customerInfo && data.customerInfo.scoreShow,
        departmentName: data.departmentName,
        consultantName: data.consultantName

      } as PersonPanelType
      const isActive = ref('details')

      const handleClick = (type: string) => {
        isActive.value = type
        if(type === 'logs') {
          getLogList()
        }
      }
      const logList = ref<LogListType[]>([])
      const getLogList = async() => {
        let res:any = await useRequest(`/customer/subscribe/getCustomerSubscribeLogPage`, {
          customerId: personData.customerId
        }, 'POST')
        logList.value = res.data.records || []
      }

      // 操作日志
    const openOperation = ref(false)
    const operationData = ref([])
    const getlogList = async(id: number) => {
      let res:any = await useRequest(`customer/subscribe/getUpdateLogById/${id}`, {}, 'GET')
      console.log(res)
      operationData.value = res.data || []
    }
    const closeOperation = () => {
      openOperation.value = false
    }
    const hanledLog = (id: number) => {
      getlogList(id)
      openOperation.value = true
    }

    const handleOpenOver = async() => {
      let res:any = await userCanComingApi({}, personData.id);
      if(res.code != 0) return ElMessage.error(res.msg);
      ElMessage.success('确定预约成功')
      reloadList()
    }
    const router = useRouter()
    // 去电子病历
    const handleOpenMedical = () => {
      console.log(personData)
      if(personData.customerId) {
        // router.push(`/allPatientDetails/${personData.id}/medicalRecord`)
        router.push({path: `/allPatientDetails/${personData.customerId}/medicalRecord`, query: {type: 5}})
      }
    }

    const handleOpenDrawp = async() => {
      ctx.emit('handleOpenEditAnApp', personData.id, personData.customerId)
        // await getMakeanapp(personData.id)

        // showDrawer.value = true
        // title.value = "修改预约"
        // isADD.value = 'makeanapp'
    }

    const makeanappInfo = ref({} as any)
    // 获取预约信息
    const getMakeanapp = async(id: number) => {
      makeanappInfo.value = {}
      
      let resp: any = await useRequest(`customer/subscribe/getSubscribeById/${id}`,{},"GET")
      makeanappInfo.value = resp.data
    }

          // 刷新列表
    const reloadList = () => {
      console.log('执行reloadList')
      ctx.emit('reloadList')
    }

    // 抽屉 --》 新建预约部分
    const showDrawer = ref(false)
    const title = ref('')
    const isADD = ref('')
    

    const drawerClose = () => {
      ElMessageBox.confirm('此操作将关闭窗口, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
				showDrawer.value = false
			}).catch(() => {
					ElMessage({
						type: 'info',
						message: '已取消',
					});
      })
    }
    const cancel = () => {
      showDrawer.value = false
    }

      return {
        isActive,
        handleClick,
        personData,
        getBirthDay,
        hanledLog,
        openOperation,
        closeOperation,
        operationData,
        logList,
        handleOpenDrawp,
        handleOpenMedical,
        handleOpenOver,

        reloadList,
        showDrawer,
        title,
        isADD,
        drawerClose,
        cancel,
        makeanappInfo
      }
    }
  })
</script>

<style lang="scss" scoped>
.person-panel-wrapper {
  .title {
    height: 80px;
    display: flex;
    border-bottom: 1px dashed;

    .avatat {
      display: flex;
      align-items: center;
      height: 100%;
      margin-right: 10px;
    }

    .avarat-info {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      .name {
        display: flex;

        .person-name {
          font-size: 20px;
          font-weight: bold;
        }

        .icons {
          display: flex;
          align-items: center;
          .tag {
            color: #fff;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            text-align: center;
            line-height: 24px;
          }
          .blue {
            background-color: #409eff;
          }

          .red {
            background-color: #f56c6c;
          }


        }
      }

      .avarat-item {
        display: flex;

        & > div:nth-child(1) {
          padding-right: 5px;
        }

        .green {
          background-color: #67c23a;
          color: #fff;
          padding: 2px 3px;
          border-radius: 4px;
          margin-left: 2px;
        }
      }
    }
  }

  .middle-info {
    // border-bottom: 1px dashed;
    .avarat-item {
      .text-wrap {
        display: flex;
        flex-wrap: wrap;
        width: 350px;
      }
    }
  }

  .panel-tabs {
    height: 300px;

    .tabs-title {
      height: 45px;
      line-height: 45px;
      background-color: #fff;
      box-sizing: border-box;
      & > span {
        border: 1px solid #EBEEF5;
        padding: 5px 12px;
        cursor: pointer;
      }
      & > span:nth-child(1) {
        border-right: 0;
      }

      & > span:hover {
        color: $mainColor;
      }

      .tabs-title-active {
        border-bottom: 2px solid #409eff;
      }
    }

    .tabs-content {
      padding: 0 10px;
      height: 250px;
      overflow: hidden;
      .layout-text {
        margin-top: 5px;
        & > span:nth-child(1) {
          display: inline-block;
          width: 80px;
        }
        & > span:nth-child(2) {
          font-weight: bold;
          padding-right: 5px;
        }
        & > span:nth-child(3) {
          border: 1px solid #EBEEF5;
          padding: 2px;
          cursor: pointer;

        }
      }

      .layout-btn {
        // position: absolute;
        // bottom: 10px;
        // left: 10px;
        width: 100px;
        text-align: center;
        border: 1px solid #EBEEF5;
        padding: 5px 8px;
        border-radius: 4px;
        cursor: pointer;
      }
      .btn-right {
        margin-left: 10px;
        width: 100px;
        text-align: center;
        border: 1px solid #EBEEF5;
        padding: 5px 8px;
        border-radius: 4px;
        cursor: pointer;
      }
      .layout-btn:hover, .btn-right:hover {
        border-color: $mainColor;
        color: $mainColor;
      }

      .logs-wrapper {
        overflow-y: auto;
        height: 100%;
        .layout-log {
        .time-info {
          & >span:nth-child(2) {
            padding: 2px 3px;
            background-color: #E6A23C;
            color: #fff;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 5px;
          }
          & >span:nth-child(3) {
            padding: 2px 3px;
            background-color: #409eff;
            color: #fff;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 5px;
          }
        }
      }
      }
      
    }

  
  }

  .btns {
    display: flex;
    align-items: center;
  }
}
</style>